<template>
    <van-cell-group inset class="shop-card-wrap" v-if="shopId&&shopId!==''">
		<div class="shop-card-wrap-bg"><img src="/img/cardBg.png" alt=""/></div>
		<div class="shop-card">
			<img :src="shopLogo" alt="" @click="to('/shop/home',{shopId:shopId})"/>
			<div class="shop-card-main">
				<label class="van-ellipsis" @click="to('/shop/home',{shopId:shopId})">{{shopBase.shopShortName}}</label>
				<div class="tag-wrap">
					<div class="sign-tag unicom"><i class="iconfont">&#xe6ef;</i>华盛全国店</div>
					<div class="sign-other"><span class="txt-primary">5年</span>店</div>
					<div class="sign-other">保证金<span class="txt-primary">0.5万</span></div>
				</div>
			</div>
			<div class="shop-card-right">
				<van-button plain :color="isFollowed?'var(--font-third-color)':'var(--van-primary-color)'"
							@click="followBtnClick($event)" loading-text=" ....." :loading="followLoading"
							:icon="!isFollowed?'plus':''" hairline round type="primary" size="mini">
					{{followText}}
				</van-button>
			</div>
		</div>
		<div class="shop-card-bottom">
			<router-link class="van-haptics-feedback" :to="'/shop/home?shopId='+shopId">进店逛逛</router-link>
			<router-link class="van-haptics-feedback" :to="'/shop/search?shopId='+shopId">全部商品</router-link>
		</div>
	</van-cell-group>
</template>
<style lang="scss" scoped>
.shop-card-wrap{
	background:var(--white-color);
	overflow:hidden;position:relative;height:104px;
	&-bg{
		position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;background-color:var(--van-primary-color);opacity: .2;
		overflow:hidden;
		img{width:100%}
	}
	.shop-card{
		position:relative;padding:10px 12px;
		display:flex;align-items: center;
		//&::after {
		//	position: absolute; box-sizing: border-box; content: " "; pointer-events: none;
		//	right:0; bottom: 0; left:0; border-bottom: 1px solid var(--van-primary-color); transform: scaleY(.5); opacity: .15;
		//}
		&>img{
			display:block;width:50px;height:50px;border-radius:32px;flex-shrink: 0;
		}
		&-main{
			width:calc(100vw - 150px); flex-shrink: 0; padding:5px 10px;
			label{display:block; font-weight:bold; font-size:14px;}
		}
		.tag-wrap{
			margin-top:4px;display:flex;align-items: center;font-size:12px;
			cursor: default;
			&>div:not(:first-child){
				margin-left:4px;
			}
		}
		.sign-tag{
			height:18px;border-radius:4px;color:var(--white-color);
			display: flex; align-items: center;
			padding:0 6px 0 4px;
			margin-right:-16px; transform-origin:0 center;
			background-color: var(--van-primary-color);
			transform:scale(.8,.8);
			&>.iconfont{font-size:14px;margin-right:4px;}
			&.unicom{
				background-color: var(--van-unicom-color);
			}
			&.other{
				background-color: var(--van-success-color);
			}
		}
		.sign-other{ color:var(--font-third-color); }
		&-right{
			flex:1;flex-shrink: 0; line-height:1; text-align:right;
			:deep(.van-icon){font-size:12px;}
			:deep(.van-button--mini){padding:0 4px;font-size:12px;width:60px; height:24px;}
		}
	}
	.shop-card-bottom{
		display:flex;height:34px;font-size:14px;
		&>a{
			display:block;flex:1;color:var(--font-second-color);height:34px;text-align: center;line-height:34px;position:relative;
			background:rgba(255,255,255,.4);
			&:first-child::after{
				content:'';position:absolute;top:0;right:-0.5px;
				width:1px;height:100%;border-left:1px solid var(--van-primary-color);opacity: .15;
			}
		}
	}
}

</style>
<script lang="ts" setup>
import _ from 'lodash'
const props=defineProps({
	shopId:{
		type:String,
		required:true,
	},
})

//data
//店铺卡片中一些简要信息，todo: 后期改造为通过shopId查询以下内容
const shopBase=reactive({
	cautionMoney:0.5, //number 入店保障金，万元
	shopShortName:'大沃尔科技全国旗舰店',
	logoPath:'',
	shopType:'3',
	createTime:'2017-08-15',
	followed:false, //boolean当前访问者是否关注了该店铺？默认false
})

//computed
const shopLogo = computed(()=>{
	if(_.isEmpty(shopBase.logoPath)){
		return '/img/avatar/shop_logo.png'
	}else{
		return shopBase.logoPath
	}
})

//methods
const {to} =useGoto()

//有关店铺关注按钮的状态显示
const {followLoading, isFollowed,followText,followBtnClick} = useFollow()
</script>